<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }

        .box{
            width: 100px;
            height: 100px;
        }

        .box1{
            background: skyblue;
        }

        .box2{
            background: orange;
        }

        .box3{
            background: lightgreen;
        }

        .box2{
            margin: 10px;
            margin: 10px 20px;
            margin: 10px 20px 30px;
            margin: 10px 20px 30px 40px;

            margin-top: 100px;
        }

        #die{
            width: 800px;
            height: 800px;
            background: gray;
            /* text-align: center; */

            display: table-cell;
            vertical-align: middle;

        }

        #son{
            width: 200px;
            height: 200px;
            background: pink;

            margin-left: auto;
            margin-right: auto;

            margin: 0 auto ;

            /* margin-top: auto; */
            /* margin-bottom: auto; */
        }


        #content{
            width: 1138px;
            height: 3000px;
            background: #B1EAB3;
            margin: 0 auto;
        }

        #box4{
            width: 300px;
            height: 300px;
            background: purple;
            color: white;

            padding: 50px;
        }

        input:nth-of-type(1){
            margin: 50px;
            outline: none;
            width: 300px;
            height: 30px;

            padding-left: 10px;
        }


        input:nth-of-type(2){
            margin: 50px;
            outline: none;
            width: 300px;
            height: 30px;
            text-align: center;

            padding-left: 10px;
        }


    </style>
</head>
<body>
    <!--  
        1. 外边距
            margin: 10px                        上下左右均为 10px
            margin: 10px 20px                   上下10   左右20
            margin: 10px 20px 30px              上10   左右20   下30
            margin: 10px 20px 30px 40px         上10  右20  下30  左40

            单外边距
            margin-方向: px

            小技巧: 
                当前元素在父级元素内 实现水平居中
                同时给 左边距 and 右边距 都设为: auto
                margin-left: auto;
                margin-right: auto;


        2. 内边距
            padding: 10px                        上下左右均为 10px
            padding: 10px 20px                   上下10   左右20
            padding: 10px 20px 30px              上10   左右20   下30
            padding: 10px 20px 30px 40px         上10  右20  下30  左40


            单外边距
            padding-方向: px





            小结: 
                margin : 对自身起作用
                text-align 和 vertical-align(display) 对内部起作用
            

            练习: 
                文字水平居中
                文字垂直居中

                小盒子在大盒子内水平居中
                小盒子在大盒子内垂直居中
    -->

    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>


    <div id="die">
        <div id="son"></div>
    </div>

    <div id="box4">老母鸡</div>

    <input type="text">
    <input type="text">

    <div id="content"></div>
    





</body>
</html>